<template>
  <div class="header">
    <div class="account">当前账号：{{ headerInfo.username }}</div>
    <a-button type="primary" @click="toLoginOut()">
      退出登陆
    </a-button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Header",
  components: {},
  props: {
    headerInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      title: "标题",
    };
  },

  created() {},
  mounted() {
    // let param = {};
    // this.$api.login.getCateList(param).then((res) => {
    //   console.log(res);
    //   // this.data = res.data.data;
    //   // this.loading = false;
    //   ImagePreview({
    //     images: [
    //       "https://img.yzcdn.cn/vant/apple-1.jpg",
    //       "https://img.yzcdn.cn/vant/apple-2.jpg",
    //     ],
    //     closeable: true,
    //   });
    // });
    // Toast('222')
  },
  methods: {
    toLoginOut() {
      // let param = {};

      let self = this;
      this.$confirm({
        title: "提示",
        content: "确定要退出登录吗？",
        onOk() {
          // self.$api.login.postUseLoginOut("").then((res: any) => {
          //   console.log(res);
          //   if (res.code == 1) {
          //     console.log(res.code);
          //     window.localStorage.clear();
          //     self.$router.push("/login");
          //   }
          //   // this.data = res.data.data;
          //   // this.loading = false;
          // });
                        self.$router.push("/login");

        },
        onCancel() {},
      });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  height: 60px;
  background: lightslategrey;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
  .account {
    margin-right: 20px;
    font-weight: 800;
    color: black;
  }
}
</style>
